<template>
  <div class="user-profile-container">
    <header>
      <button class="back-button" @click="goBack">
        <i class="fa fa-arrow-left"></i>
        <span>返回首页</span>
      </button>
    </header>
    <div class="wrapper">
      <!-- 用户头像展示 -->
      <div class="avatar-section">
        <div class="avatar-wrapper">
          <img 
            :src="userAvatar" 
            alt="用户头像"
            class="avatar-image"
            @error="handleImageError"
          >
        </div>
      </div>

      <!-- 用户信息展示 -->
      <div class="user-info-section">
        <div class="info-card">
          <div class="info-row">
            <span class="info-label">用户ID：</span>
            <span class="info-value">{{ debugInfo.userId || '暂无' }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">用户名：</span>
            <span class="info-value">{{ debugInfo.userName || '暂无' }}</span>
          </div>
          <div class="status-row">
            <span class="status-indicator" :class="statusClass">
              {{ debugInfo.status }}
            </span>
          </div>
          <!-- 新增的修改用户信息按钮 -->
          <div class="edit-button-container">
            <button class="edit-button" @click="goToEditPage">
              <i class="fa fa-edit"></i>
              <span>修改用户信息</span>
            </button>
          </div>
        </div>
      </div><!-- 用户信息结束 -->
    </div><!-- wrapper结束 -->
  </div><!--整体div结束-->
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { getSessionStorage } from '../common.js';

const debugInfo = ref({
  userId: null,
  userName: null,
  status: '加载中...'
});

const defaultAvatar = 'https://cdn-icons-png.flaticon.com/512/3135/3135715.png';
const userAvatar = ref(defaultAvatar);
const route = useRoute();
const router = useRouter();
const userId = ref(null);

const goBack = () => {
  router.push('/index');
};

// 新增：跳转到编辑页面
const goToEditPage = () => {
  router.push({
    path: '/alterUserInfo',
    query: { userId: userId.value }
  });
};

const statusClass = computed(() => {
  return {
    'status-loading': debugInfo.value.status.includes('加载中'),
    'status-success': debugInfo.value.status.includes('成功'),
    'status-error': debugInfo.value.status.includes('失败')
  };
});

const handleImageError = () => {
  userAvatar.value = defaultAvatar;
};

const fetchUserData = async () => {
  try {
    // 首先从sessionStorage获取用户信息
    const userData = getSessionStorage('user');
    
    if (!userData) {
      debugInfo.value.status = '未登录，请先登录';
      router.push('/login');
      return;
    }

    // 设置基本信息
    debugInfo.value = {
      userId: userData.userId,
      userName: userData.userName,
      status: '已登录'
    };
    
    userId.value = userData.userId;

    // 可选：从服务器获取最新的用户信息
    try {
      const response = await axios.get('UserController/getUserById', {
        params: {
          userId: userData.userId
        }
      });
      
      if (response.data) {
        debugInfo.value = {
          userId: response.data.userId,
          userName: response.data.userName,
          status: '信息已更新'
        };

        if (response.data.avatarUrl) {
          userAvatar.value = response.data.avatarUrl;
        }
      }
    } catch (apiError) {
      console.log('API请求失败，使用缓存数据:', apiError.message);
      // 即使API失败，也使用sessionStorage中的数据
    }
    
  } catch (error) {
    debugInfo.value.status = '加载失败: ' + error.message;
  }
};

onMounted(() => {
  fetchUserData();
});
</script>

<style scoped>
.user-profile-container {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.avatar-wrapper {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
}

.user-info-section {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-row {
  display: flex;
  align-items: center;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #e9ecef;
}

.info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-label {
  font-weight: 600;
  color: #495057;
  min-width: 80px;
  font-size: 0.95rem;
}

.info-value {
  color: #212529;
  font-weight: 500;
  font-size: 1rem;
}

.status-row {
  margin-top: 1rem;
  text-align: center;
}

.status-indicator {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  transform: scale(1);
}

.status-indicator:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.status-loading {
  background-color: #fff3cd;
  color: #856404;
}

.status-success {
  background-color: #d4edda;
  color: #155724;
}

.status-error {
  background-color: #f8d7da;
  color: #721c24;
}

/* 新增编辑按钮样式 */
.edit-button-container {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.edit-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #4a6bdf;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-button:hover {
  background-color: #3a56c0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.edit-button i {
  font-size: 1rem;
}

header {
  position: relative;
}

header p {
  margin-left: 24px;
}

@media (max-width: 600px) {
  .user-profile-container {
    padding: 1.5rem;
    margin: 1rem;
  }
  
  .avatar-wrapper {
    width: 100px;
    height: 100px;
  }
}
</style>